import React, { useState, useEffect } from 'react';
import './classifier.less';
import request from 'umi-request';
import { Switch, Tree, Button, Input, message, Select, TreeSelect } from 'antd';
const { TextArea } = Input;
import {
  CarryOutOutlined,
  CheckOutlined,
  FormOutlined,
  MehOutlined,
} from '@ant-design/icons';
import { Resizable } from 'react-resizable';
import { Table, InputNumber } from 'antd';
import { history } from 'umi';
import {
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
export default function Index() {
  const [showLine, setShowLine] = useState(true);
  const [showIcon, setShowIcon] = useState(false);
  const [showLeafIcon, setShowLeafIcon] = useState(true);
  const [name_id, setname_id] = useState('');
  const onSelect = (selectedKeys, info) => {
    console.log('selected', info.node.name);
    request('/api/hqh/mYprofileshu_only?name=' + info.node.name).then((res) => {
      setinputdefalutvalue(res.data[0].sort_sc);
      setname(res.data[0].name);
      setTreevalue('63e1e6697ebc7b20d65f0bf8');
      setname_id(res.data[0]._id);
    });
  };
  // 下拉上级分类*
  const handleChange = (value: string) => {
    setnameselect(value);
  };
  // 下拉权限类别
  const handleChangeclass = (value: string) => {
    setnameselectclass(value);
  };
  // 数据

  const [nameselect, setnameselect] = useState(''); // 上级分类
  const [nameselectclass, setnameselectclass] = useState(''); // 权限类别
  const [ids_order, setids_order] = useState(0); // 显示顺序
  const [jianjie, setjianjie] = useState(''); // 文档简介
  const [names, setname] = useState('123'); // 文档名称
  const [xiangmuleix, setxiangmuleix] = useState(''); // 项目类型
  // 表格
  const [acolumns, setAcolumns] = useState([
    {
      title: '',
      key: '_id',
      width: 40,
      render: (text, record, index) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '所属类别',
      key: 'nameselect',
      width: 100,
      dataIndex: 'nameselect',
      ellipsis: true,
    },
    {
      title: '文档名称',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      width: 200,
    },
    {
      title: '上传人员',
      dataIndex: 'personnel',
      key: 'personnel',
      ellipsis: true,
      width: 100,
    },
    {
      title: '上传时间',
      dataIndex: 'shangchuang',
      key: 'shangchuang',
      ellipsis: true,
      width: 100,
    },
    {
      title: '',
      dataIndex: 'prodepartment',
      key: 'prodepartment',
      ellipsis: true,
      width: 100,
      render: (text, record, index) => (
        <span style={{ textDecoration: 'underline', color: 'blue' }}>查看</span>
      ),
    },
    {
      title: '',
      dataIndex: 'daname',
      key: 'daname',
      ellipsis: true,
      width: 100,
      render: (text, record, index) => (
        <span style={{ textDecoration: 'underline', color: 'blue' }}>下载</span>
      ),
    },
    {
      title: '',
      dataIndex: 'status',
      key: 'status',
      ellipsis: true,
      width: 100,
      render: (text, record, index) => (
        <span style={{ textDecoration: 'underline', color: 'blue' }}>共享</span>
      ),
    },
  ]);
  const [components, setComponents] = useState({});
  const [mYprofileshus, setmYprofileshus] = useState([]);
  const [xiaolai, setxialaishangjifenl] = useState([]);
  const [Treevalue, setTreevalue] = useState([]);
  useEffect(() => {
    request('/api/hqh/mYprofileshu').then((res) => {
      setmYprofileshus(res.data);
    });
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const ResizeableTitle = (props: any) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={38} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index: any) =>
    (e: any, { size }: any) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setAcolumns(nextColumns);
    };
  const columns = acolumns.map((col, index) => ({
    ...col,
    onHeaderCell: () => ({
      width: col.width || 100,
      onResize: handleResize(index),
    }),
  }));
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys: any) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const [seachName, setseachName] = useState();
  const [inputdefalutvalue, setinputdefalutvalue] = useState();
  const [Selectdefaultvalue, setSelectdefaultvalue] = useState();

  return (
    <div>
      <div className="classfier_top">
        <div className="classfier_top_buttondata">
          <Button
            onClick={() => {
              request
                .post('http://localhost:8597/hqh/mYprofileshuadd', {
                  data: {
                    name: names,
                    nameselect,
                    sort_sc: inputdefalutvalue,
                    nameselectclass,
                  },
                })
                .then((val) => {
                  request('/api/hqh/mYprofileshu').then((res) => {
                    setmYprofileshus(res.data);
                  });
                });

              //
            }}
          >
            新增
          </Button>
          <Button
            onClick={() => {
              if (name_id) {
                request
                  .put(
                    'http://localhost:8597/hqh/mYprofileshuupdate?id=' +
                      name_id,
                    {
                      data: {
                        name: names,
                        nameselect,
                        sort_sc: inputdefalutvalue,
                        nameselectclass,
                      },
                    },
                  )
                  .then((val) => {
                    request('/api/hqh/mYprofileshu').then((res) => {
                      setmYprofileshus(res.data);
                    });
                  });
              } else {
                request
                  .post('http://localhost:8597/hqh/mYprofileshuadd', {
                    data: {
                      name: names,
                      nameselect,
                      sort_sc: inputdefalutvalue,
                      nameselectclass,
                    },
                  })
                  .then((val) => {
                    request('/api/hqh/mYprofileshu').then((res) => {
                      setmYprofileshus(res.data);
                    });
                  });
              }

              //
            }}
          >
            修改
          </Button>
          <Button
            onClick={() => {
              if (name_id) {
                request
                  .delete(
                    'http://localhost:8597/hqh/mYprofileshus?id=' + name_id,
                    {},
                  )
                  .then((val) => {
                    request('/api/hqh/mYprofileshu').then((res) => {
                      setmYprofileshus(res.data);
                    });
                  });
                message.error('删除成功');
                setname_id();
              } else {
                message.error('请选择删除');
              }
            }}
          >
            删除
          </Button>
        </div>
      </div>
      <div className="classfier">
        <div className="classfier_left">
          <Tree
            showLine={showLeafIcon}
            fieldNames={{
              title: 'name',
              key: '_id',
              children: 'name_id',
            }}
            showIcon={showIcon}
            onSelect={onSelect}
            treeData={mYprofileshus}
          />
        </div>
        <div className="classfier_right">
          <ul style={{ listStyle: 'none' }}>
            <li
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignContent: 'center',
                marginTop: '10px',
              }}
            >
              <span
                style={{ width: '80px', marginTop: '5px', marginLeft: '5px' }}
              >
                文档名称*:
              </span>{' '}
              <Input
                value={names}
                onChange={(e) => {
                  setname(e.target.value);
                }}
              />
            </li>
            <li
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignContent: 'center',
                marginTop: '5px',
              }}
            >
              <span
                style={{ width: '80px', marginTop: '5px', marginLeft: '5px' }}
              >
                上级分类*:
              </span>{' '}
              <TreeSelect
                treeLine={true}
                style={{ width: '100%' }}
                onChange={(newValue) => {
                  setnameselect(newValue);
                }}
                fieldNames={{
                  label: 'name',
                  value: '_id',
                  children: 'name_id',
                }}
                treeData={mYprofileshus}
              />
            </li>
            <li
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignContent: 'center',
                marginTop: '5px',
              }}
            >
              <span
                style={{ width: '80px', marginTop: '5px', marginLeft: '5px' }}
              >
                权限类别*:
              </span>{' '}
              <Select
                style={{ width: '100%' }}
                onChange={handleChangeclass}
                defaultValue="按角色分配权限"
                options={[
                  { value: '', label: '' },
                  { value: '按角色分配权限', label: '按角色分配权限' },
                  { value: '按人员分配权限', label: '按人员分配权限' },
                ]}
              />
            </li>
            <li
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignContent: 'center',
                marginTop: '5px',
              }}
            >
              <span
                style={{ width: '80px', marginTop: '5px', marginLeft: '5px' }}
              >
                显示顺序*:
              </span>{' '}
              <InputNumber
                style={{ width: '100%' }}
                min={1}
                max={10}
                value={inputdefalutvalue}
                onChange={(val) => {
                  setinputdefalutvalue(val);
                }}
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}
